<template>
  <header class="header">
    <div class="title">
      <span>{{ title }}</span>
    </div>
  </header>
</template>

<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator';

@Component({
  name: 'Header',
})
export default class extends Vue {
  @Prop({ default: '我的' }) private readonly title!: string;
}
</script>

<style scoped>
.header {
  height: 100px;
}
.title {
  line-height: 100px;
}
.title span {
  padding: 7px 20px;
  border: 3px solid #C0C4CC;
  border-radius: 75px;
  color: #606266;
}
</style>
